<template>
  <div>
    <a-modal v-model:visible="visible">
      <template #title> 出库 </template>
      <a-form :model="form" :rules="rules" ref="formRef" @submit="handleSubmit">
        <a-form-item label="酒罐名称">
          <a-input v-model="form.tank_name" readonly />
        </a-form-item>
        <a-form-item label="出库数量" field="out_num">
          <a-input-number
            v-model="form.out_num"
            placeholder="请输入出库数量"
            :max="form.wine_tank_stock"
            :min="0"
          >
            <template #append> 公斤 </template>
          </a-input-number>
          <template #extra>
            <div>现有{{ form.wine_tank_stock }}公斤</div>
          </template>
        </a-form-item>
        <a-form-item label="出库目标" field="out_target_id">
          <a-select v-model="form.out_target_id" placeholder="请选择出库目标">
            <a-option
              v-for="item in props.targetList"
              :key="item.id"
              :value="item.id"
            >
              {{ item.target_name }}
            </a-option>
          </a-select>
          <a-button @click="handleAdd()" :style="{ marginLeft: '10px' }"
            >新增目标</a-button
          >
        </a-form-item>
        <a-form-item label="出库时间" field="out_time">
          <a-date-picker
            style="width: 100%"
            v-model="form.out_time"
            placeholder="请选择出库时间"
          />
        </a-form-item>
        <a-form-item label="备注">
          <a-textarea v-model="form.out_remark" placeholder="请输入备注" />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-button type="primary" @click="save">确定</a-button>
      </template>
    </a-modal>
    <WineTargetDialog ref="wineTargetDialog" :getTarget="getTarget" />
  </div>
</template>


<script lang="ts" setup>
import { ref, reactive } from 'vue';
import WineTargetDialog from './wineTargetDialog.vue';
import { gouduiOutWine } from '@/api/winepro';
import { Message } from '@arco-design/web-vue';
const props = defineProps({
  targetList: { type: Array },
  getTarget: { type: Function },
  getTankList: { type: Function },
  getGouduiOutWineListAgaig:{type:Function}
});
const formRef = ref(null);
const visible = ref(false);
const wineTargetDialog = ref(null);
const save = () => {
  formRef.value.validate().then(async (res) => {
    if (res === undefined) {
      const { code, message } = await gouduiOutWine(form);
      if (code === 200) {
        Message.success(message);
        props.getTankList();
        props.getGouduiOutWineListAgaig()
        visible.value = false;
        formRef.value.resetFields();
      }
    }
  });
};
const openDialog = (record) => {
  form.tank_id = record.id;
  form.tank_name = record.wine_tank_name;
  form.wine_tank_stock = record.wine_tank_stock;
  visible.value = true;
};
const handleAdd = () => {
  wineTargetDialog.value.openDialog();
};
const form = reactive({
  tank_id: '',
  tank_name: '',
  out_time: '',
  wine_tank_stock: '',
  out_num: '',
  out_target_id: '',
  out_remark: '',
});
const rules = {
  out_num: [
    {
      required: true,
      message: '请输入出库数量',
    },
  ],
  out_target_id: [
    {
      required: true,
      message: '请选择出库目标',
    },
  ],
  out_time: [
    {
      required: true,
      message: '请选择出库时间',
    },
  ],
};
defineExpose({
  openDialog,
});
</script>

<style lang="less" scoped></style>